<template>
    <div>
        <el-row>
            <el-col :span="12" align="left">
                <span>月份范围：</span>
                <el-date-picker
                    v-model="month"
                    style="width:50%"
                    type="monthrange"
                    value-format="yyyy-MM"
                    clearable
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                </el-date-picker>
            </el-col>
            <el-col :span="12" align="left">
                <span>区：</span>
                <el-select v-model="area" placeholder="请选择区" clearable>
                    <el-option
                    v-for="item in areaList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>部门：</span>
                <el-select v-model="department" placeholder="请选择部门" clearable>
                    <el-option
                    v-for="item in departmentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" align="left">
                <span>组：</span>
                <el-select v-model="group" placeholder="请选择组" clearable>
                    <el-option
                    v-for="item in groupList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" align="left">
                <span>部：</span>
                <el-select v-model="part" placeholder="请选择部" clearable>
                    <el-option
                    v-for="item in partList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" align="left">
                <span>服务人员：</span>
                <el-select v-model="saleman" placeholder="请选择服务人员" clearable>
                    <el-option
                    v-for="item in salemanList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="success" @click="exports" :disabled="loading" :loading="loading">导出数据</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4" align="right">
                
            </el-col>
        </el-row> 
    </div>
</template>

<script>
var searchInfo={
    
};
var startMonth="";
var endMonth="";
export default {
    data(){
        return{
            month:"",
            area:"",
            areaList:[],
            department:"",
            departmentList:[],
            group:"",
            groupList:[],
            part:"",
            partList:[],
            saleman:"",
            salemanList:[],
            loading:false,
        }
    },
    mounted(){
        this.requestInfo();
    },
    methods:{
        requestInfo(){
            this.getRequest("/common/getDepartmentInfo").then(resp =>{
                if(resp && resp.status==200){
                    this.areaList=resp.data.obj.areList;
                    this.departmentList=resp.data.obj.departmentList;
                    this.groupList=resp.data.obj.groupList;
                    this.partList=resp.data.obj.partList;
                    this.salemanList=resp.data.obj.salemanList;
                }
            })
        },
        handleChange(value) {
            console.log(value);
        },
        exports(){
            if(!this.month){
                this.common.showToast('info','请填写月份范围')
            }else{
                startMonth=this.month[0];
                endMonth=this.month[1];
                this.loading=true;
                var address=`/api/report/raise/export?startMonth=${startMonth}&&endMonth=${endMonth}&&group=${this.group}&&part=${this.part}&&area=${this.area}&&department=${this.department}&&salemanId=${this.saleman}`
                this.common.downloadFile(address);
                setTimeout(()=>{
                    this.loading=false;
                },2000)    
            }
            
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input,.el-input__inner{
    width: 70%;
}
.el-select{
    width: 50%;
}
</style>
